@charset "UTF-8";
/* 	a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block
}
body {
	line-height:1;
	color:#303030;
	font-family:SimHei,"Helvetica Neue",Arial,"Droid Sans",sans-serif;
	background:#f6f6f6
}
input[type=text],textarea {
	-webkit-appearance:none
}
input:focus {
	-webkit-user-modify:read-write-plaintext-only
}
ol,ul {
	list-style:none
}
blockquote,q {
	quotes:none
}
blockquote:after,blockquote:before,q:after,q:before {
	content:'';
	content:none
}
table {
	border-collapse:collapse;
	border-spacing:0
}
* {
	-webkit-tap-highlight-color:transparent;
	-webkit-tap-highlight-color:transparent;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box
}
body,html {
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:100%;
	font-size:100px
}
a,button,input {
	outline:0 none;
	text-decoration:none
}
img {
	border:0 none;
	vertical-align:bottom;
	-ms-interpolation-mode:bicubic
} */
html,body,.main{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.main{
    position: relative;
}
.loading{
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    z-index: 10;
    display: none;
}
.load-head{
    position: absolute;
    top: 25%;
    width: 100%;
    text-align: center;
}
.loading h3{
    color: #fff;
}
.loading h3:nth-child(1){
   font-size: 0.5rem;
}
.loading h3:nth-child(2){
    font-size: 0.25rem;
    padding: 0.1rem 0;
}
.progress{
    position: absolute;
    width: 80%;
    height: 0.4rem;
    margin: 0 10%;
    border-radius: 10px;
    top:54%;
    background: #fff;
    overflow: hidden;
}
.progress-bar{
    width: 0%;
    height: 100%;
    background: -webkit-linear-gradient(45deg, #5cb85c 0%, #5cb85c 25%, #74c274 25%, #74c274 50%, #5cb85c 50%, #5cb85c 75%, #74c274 75%, #74c274 100%);
    background: linear-gradient(45deg, #5cb85c 0%, #5cb85c 25%, #74c274 25%, #74c274 50%, #5cb85c 50%, #5cb85c 75%, #74c274 75%, #74c274 100%);
    background-size:0.4rem 0.4rem;
    background-repeat: repeat-x;
    -webkit-transition:width 1s linear;
    transition:width 1s linear;
}
#enter{
	display: block;
	background: url(../images/btn.png) no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: 35%;
	right: 35%;
	top: 70%;
	bottom: 24%;
}
.phone{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
    background:url(../images/phone-bg.jpg) no-repeat;
    background-size: 100% 100%;
		display: none;
}
.phone-name{
    width: 100%;
    position: absolute;
    top: 0.5rem;
    height: 1.15rem;
    background: url(../images/phone-name.png) no-repeat  center top;
    background-size: 2.62rem 1.15rem;
}
.phone-listen{
    width: 5.2rem;
    height: 3.6rem;
    position: absolute;
    bottom: 5%;
    left: 50%;
    margin-left: -2.6rem;
    background: url(../images/phone-listen.png) no-repeat;
    background-size:5.2rem 3.6rem;
}
.listen-arc,.touch{
    width: 1.7rem;
    height: 1.7rem;
    position: absolute;
    left: 3.58rem;
    top: 1.43rem;
}
.listen-arc{
    color: #0f0;
    border:0.03rem solid #0f0;
    border-radius: 50%;
    -webkit-animation: btnScale 0.5s infinite both;
    animation: btnScale 1s infinite both;
    z-index: -1;
}
@-webkit-keyframes btnScale {
    0%{
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100%{
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
    }
}
@keyframes btnScale {
    0%{
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100%{
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
    }
}

.touch{
    z-index: 2;
}

.phone-text{
    font-size: 0.3rem;
    margin-top: 0.1rem;
    letter-spacing: 5px;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 1.6rem;
    color: #fff;
}
.phone-key{
    width: 5.2rem;
    height: 6.59rem;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -2.6rem;
    background: url(../images/phone-key.png) no-repeat;
    background-size:100% 100%;
    -webkit-transform: translate(0,6.59rem);
    transform: translate(0,6.59rem);
    -webkit-transition: 1s;
    transition: 1s;
}
.phone-refuse{
    width: 1.7rem;
    height: 1.7rem;
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    margin-left: -0.85rem;
    z-index: 2;
}
.msg{
    width: 100%;
    height:100%;
    background: #eaeaea;
    position: absolute;
    z-index: 8;
		display: none;
}
.msg .content{
    width: 100%;
    height: 100%;
    position: relative;
    top: 0.2rem;
    -webkit-transition: 1s;
    transition: 1s;
}
.msg .content p{
    display: block;
    padding: 0.25rem;
    line-height: 0.4rem;
    font-size: 0.26rem;
    border-radius: 0.1rem;
    overflow: hidden;
    opacity: 0;
    -webkit-transform:translate(0,1rem);
    transform:translate(0,1rem);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.msg p .u-img{
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    padding-top: .3rem;
}
.msg p.left .u-img{
    float: left;
    margin-right: .1rem;
    background: url(../images/message-head2.png) no-repeat center/100%;
}
.msg p.right .u-img{
    float: right;
    margin-left: .1rem;
    background: url(../images/message-head1.png) no-repeat center/100%;
}
.u-content{
    position: relative;
    display: block;
    background: #fff;
    max-width: 3.6rem;
    padding: .2rem;
    border-radius: 0.2rem;
}
.msg p.left .u-content{
    float: left;
}
.nontext{
    background: #eaeaea;
}
.msg p.right .u-content{
    float: right;
}
#vedio-img{
    width: 1.64rem;
    height: 2.83rem;
}
.vedio-btn{
    display: inline-block;
    position: absolute;
    background: url(../images/video-btn.png) 0 0 no-repeat;
    background-size: 100% 100%;
    height: .31rem;
    width: .29rem;
    top: 50%;
    margin-top: .15rem;
    left: 50%;
    margin-left: .04rem;
}
.quan{
    display: inline-block;
    position: absolute;
    height: .84rem;
    width: .84rem;
    border: 2px solid #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: -.33rem;
    margin-top: -.42rem;
    -webkit-animation: quanset 1s infinite ease-out;
    animation: quanset 1s infinite ease-out;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
@-webkit-keyframes quanset {
    0% {
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
    50% {
        -webkit-transform:scale3d(0.8,.8,.8);
        transform:scale3d(0.8,.8,.8)
    }
    100% {
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}
@keyframes quanset {
    0% {
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
    50% {
        -webkit-transform:scale3d(0.8,.8,.8);
        transform:scale3d(0.8,.8,.8)
    }
    100% {
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)
    }
}
.keyboard{
    width: 6.4rem;
    height: 5.16rem;
    position: absolute;
    left: 50%;
    margin-left: -3.2rem;
    bottom: 0;
    z-index: 3;
    background: url(../images/message-keyboard.png) no-repeat;
    background-size:100% 100%;
    -webkit-transform: translate(0,4.16rem);
    transform: translate(0,4.16rem);
    -webkit-transition: 1s;
		transition: 1s;
}
.keyboard-text{
    width: 4rem;
    height: 0.4rem;
    line-height: 0.4rem;
    position: absolute;
    top: 0.35rem;
    left: 0.9rem;
    font-size: 0.25rem;
}
.keyboard-btn{
    width: 1.47rem;
    height: 0.74rem;
    position: absolute;
    right:0.1rem;
    bottom: 0.6rem;
    background: url(../images/message-chatBtn.png) no-repeat;
    background-size:100% 100%;
    opacity: 0;
}
.cube{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/cube-bg.jpg) no-repeat;
    background-size: 100% 100%;
    -webkit-perspective: 8rem;
    perspective: 8rem;
    z-index: 7;
		display: none;
}
.cube-box{
    width: 5.1rem;
    height: 5.1rem;
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -2.55rem;
    margin-left: -2.55rem;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:scale(0.5) rotateX(-35deg) rotateY(135deg);
    transform:rotateX(-35deg) rotateY(135deg);
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-transform-origin:2.55rem 2.55rem -2.55rem;
    transform-origin:2.55rem 2.55rem -2.55rem;
}
.cube-box li{
    width:100%;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size:100% 100%;
}
.cube-box li:nth-child(1){
    top:-5.1rem;
    background-image:url(../images/cube-img1.png);
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin:bottom;
    transform-origin:bottom;
}
.cube-box li:nth-child(2){
    top:5.1rem;
    background-image:url(../images/cube-img2.png);
    -webkit-transform: rotateX(-90deg) ;
    transform: rotateX(-90deg) ;
    -webkit-transform-origin:top;
    transform-origin:top;
}
.cube-box li:nth-child(3){
    left:5.1rem;
    background-image:url(../images/cube-img3.png);
    -webkit-transform: rotateY(90deg) ;
    transform: rotateY(90deg) ;
    -webkit-transform-origin:left;
    transform-origin:left;
}
.cube-box li:nth-child(4){
    left:-5.1rem;
    background-image:url(../images/cube-img4.png);
    -webkit-transform: rotateY(-90deg) ;
    transform: rotateY(-90deg) ;
    -webkit-transform-origin:right;
    transform-origin:right;
}
.cube-box li:nth-child(5){
    background-image:url(../images/cube-img5.png);
    -webkit-transform:translateZ(0rem);
    transform:translateZ(0rem);
}
.cube-box li:nth-child(6){
    background-image:url(../images/cube-img6.png);
    -webkit-transform: translateZ(-5.1rem);
    transform: translateZ(-5.1rem);
}
.cube-tip{
    width:3.94rem;
    height: 0.44rem;
    background:url(../images/cube-tip.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    margin-left: -1.97rem;
    bottom: 0.5rem;
}
/*详细介绍*/
.details{
    width: 100%;
    height: 100%;
    /* display: none; */
}
.swiper-container,.swiper-wrapper,.swiper-slide{
    width: 100%;
    height: 100%;
}
.details .slide1{
	background: url(../images/detail/index.jpg) no-repeat;
	background-size: 100% 100%;
}
.details .slide2{
   background: url(../images/detail/blacktea.jpg) no-repeat;
   background-size: 100% 100%;
}
.details .slide3{
   background: url(../images/detail/tphk.jpg) no-repeat;
   background-size: 100% 100%;
}
.details .slide4{
    background: url(../images/detail/hsmf.jpg) no-repeat;
    background-size: 100% 100%;
}
.details .slide5{
    background: url(../images/detail/lagp.jpg) no-repeat;
    background-size: 100% 100%;
}

.details .slide6{
    background: url(../images/detail/last.jpg) no-repeat;
    background-size: 100% 100%;
}
.page2{
	width:100%;
	height: 100%;
	box-sizing:border-box;
	position:relative;
	background:#df4941;
	padding:30px;
	color:#FFF;
	font-family:"Helvetica Neue", sans-serif;
	box-sizing:border-box;
	overflow: hidden;
}
.page2 .story-header h1{
	font-size:.3rem;
	border-bottom:1px solid rgba(255,255,255,.6);
	padding-bottom:10px;
}
.page2 .story-header{
	margin-bottom:30px;
}
.page2 .story-header>p{
	font-size: .35rem;
}
/* .page2 .stroy-img{
	width: 70%;
	height: 50%;
	display:flex;
  align-items:center; 
  justify-content:center;
}
.stroy-img img{
	width:100%;
  height:auto;
} */
.story-stepbox{
	display:flex;
	flex-wrap: wrap;
	justify-content:space-between;
	width: 100%;
}
.story-step{
	height: .9rem;
	font-size: .35rem;
	padding:.2rem .4rem .2rem .5rem;
	margin-bottom: 0.6rem;
	border-radius: .05rem;
}
.story-step:nth-child(odd){
	background:rgba(255,255,255,.05);
}
.story-step:nth-child(even){
	background:rgba(0,0,0,.05);
}
.shield{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:999;
}
.shield .rule{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/story.png) no-repeat 50%/contain;
	background-size: 100% 103%;
}
.shield .rule .content{
	display: block;
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 80%;
	height: 80%;
	background: url(../images/storybg1.png) no-repeat 50%/contain;
	background-size: 100% 100%;
	padding:75px 0;
	overflow: hidden;
	box-sizing: border-box;
}
.content .ruletxt {
	width: 90%;
	height: 100%;
	overflow: scroll;
	margin: 0 auto;
	background-color: rgb(255, 255, 230);
	font-size: .3rem;
	color: rgb(35, 130, 109)
}
.ruletxt>img{
	width: 100%;
}
.shield .info{
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%);
	transform: translate(-50%);
	bottom: .3rem;
	width: .4rem;
	height: .4rem;
	background: url(../images/cancel.png) no-repeat 50%/contain;
	background-size: .4rem;
}

.detailsReturn{
    width: 0.5rem;
    height: 0.5rem;
    background: url(../images/zf-detailsReturn.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left:0.1rem;
    top:0.1rem;
    z-index: 4;
}
/*音乐按钮旋转动画设置，相同的速度开始到播放linear，循环设置infinite*/
.rotate {
	-webkit-animation: rotating 1.2s linear infinite;
	animation: rotating 2s linear infinite
}
.audio1{
	position:absolute;
	right:20px;
	top:7%;
	width:30px;
	height:30px;
	background-size:contain;
	background-repeat:no-repeat;
	background-image:url(../images/normalmusic.svg);
	z-index:101;
	display:none;
}
/*=====音乐按钮旋转动画，从0度到360度，一圈=====*/
@-webkit-keyframes rotating {
	from {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
@keyframes rotating {
	from {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}
/* 竖屏检测 begin */
.mod-orient-layer { display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; background: #000; z-index: 9999; }
.mol_content { position: absolute; width: 100%; top: 45%; text-align: center; }
.mol_desc { margin-top: 20px; font-size: 15px; color: #fff;}
/* 竖屏检测 end */
.ar-video-wrapper {
	position:fixed;
	top:0;
	height:100%;
	width:100%;
	background-color:#000;
	font-size:0;
	z-index:999;
	display:none;
	overflow:hidden
}